window.onload = function() {
    let startBtn = document.querySelector(".start-btn"); //开始按钮
    let indexStart = document.querySelector(".index-start"); // 获取首页
    let main = document.querySelector(".main"); // 获取游戏主界面
    let audio = document.querySelector("audio"); // 获取音频标签
    let game = document.querySelector(".game-zimu"); // 字母界面
    let number = 5; // 页面中的图片数量
    let timer = null; // 保存动画的时间函数
    let maxH = null; // 保存动画界面的高度，用于设置图片的最大top值
    let blood = 10; // 生命值
    let score = 0; // 得分情况
    let gameEnd = document.querySelector(".game-lose ");
    let reloadBtn = document.querySelector(".success-btnn");;
    console.log(reloadBtn);
    let closeMusic = document.querySelector(".top-btn img");
    let load = document.querySelector(".load-page");
    let loadImg = load.lastElementChild.firstElementChild;
    console.log(loadImg);
    
    // 点击开始按钮执行代码
    startBtn.onclick = function() {
        indexStart.style.transform = "translate(0, 100%)";
        indexStart.style.transition = "transform .1s linear";
        progress();
    }
    let flag = true;
    closeMusic.onclick = function() {
        if (flag) {
            audio.pause();
            this.src = "./images/禁音.png";
        } else {
            audio.play();
            this.src = "./images/扩音.png";
        }
        flag = !flag;
    }

    // 封装进度条函数
    function progress() {
        load.style.display = "block";
        let speed = 0;
        let a = setInterval(() => {
            speed += 1;
            loadImg.style.width = speed + 'px';
            if (speed >= 324) {
                clearInterval(a);
                load.style.display = "none";
                loadImg.style.width = 0;
                play();
            }
        }, 20)
    }

    // 游戏函数
    function play() {
        // 游戏音频播放
        audio.play();
        main.style.display = "block";
        maxH = game.offsetHeight;
        bloods(blood);
        scores(score);
        timer = setInterval(move, 100);
        // 添加交互效果
        window.onkeydown = jh;
    }

    // 交互效果函数
    function jh(e) {
        let ev = e || event;
        let lett = String.fromCharCode(ev.keyCode).toLowerCase();
        // 获取所有图片
        let letters = document.querySelectorAll(".game-zimu img");
        if (letters.length) {
            for (let i = 0; i < letters.length; i++) {
                if (letters[i].className === lett) {
                    score += 10;
                    scores(score);
                    game.removeChild(letters[i]);
                    break;
                }
            }
        }
    }

    // 封装动画函数
    function move() {
        // 获取页面中所有的字母图片
        let letters = document.querySelectorAll(".game-zimu img");
        // 保证页面中一直都有number张图片，确保游戏的顺利进行
        if (letters.length < number) {
            createImg(number - letters.length);
        }
        //将页面中所有的图片letters进行遍历，添加下落动画 
        if (letters.length) {
            for (let i = 0; i < letters.length; i++) {
                let current = letters[i].offsetTop;
                current += 10;
                letters[i].style.top = current + "px";
                if (current >= maxH - letters[i].offsetHeight) {
                    blood--;
                    bloods(blood);
                    game.removeChild(letters[i]);
                    if (blood === 0) {
                        clearInterval(timer);
                        gameEnd.style.display = "block";
                        audio.pause();
                        return;
                    }
                }
            }
        }
    }
    // 封装函数bloods进行生命值的展示
    function bloods(blood) {
        console.log(blood);
        let blo = document.querySelector(".top-img-box span");
        let img = blo.previousElementSibling;
        blo.innerHTML = blood;
        img.style.width = 14 * blood + "px";
    }

    // 封装函数scores进行分数的展示
    function scores(score) {
        let sco = document.querySelector(".top-img-box1 span");
        sco.innerHTML = score;
    }

    // 封装函数createImg用来生成随机的字母以及对应的图片
    function createImg(number) {
        for (let i = 0; i < number; i++) {
            // 生成ASCII码中97-122的随机数字
            let rand = Math.floor(Math.random() * 26 + 97);
            let lett = String.fromCharCode(rand).toLowerCase();
            // 将字母对应的图片展示到页面中
            let img = document.createElement("img");
            img.src = "./images/" + lett + ".png";
            img.className = lett;
            // 给img设置初始的位置(定位)
            let left = Math.floor(Math.random() * 800);
            let tops = -Math.floor(Math.random() * 50 + 100);
            img.style.left = left + "px";
            img.style.top = tops + "px";
            game.appendChild(img);
        }
    }

    // 重新开始
    reloadBtn.onclick = () => {
        blood = 10;
        score = 0;
        gameEnd.style.display = "none";
        indexStart.style.transform = "translate(0,0)";
        main.style.display = "none";
    }
}